<template>
	<view class="login">
		<view class="" style="width: 80%;margin: 100rpx auto;">
			<view class="form_box">
				<u-form :model="form" ref="uForm" label-width='auto'>
					<u-form-item label="账号:" prop="userName">
						<u-input v-model="form.userName" placeholder='用作登录账号使用' />
					</u-form-item>
					<u-form-item label="昵称:" prop="nickName">
						<u-input v-model="form.nickName" placeholder='请输入昵称' />
					</u-form-item>
					<u-form-item label="联系方式:" prop="telPhone">
						<u-input v-model="form.telPhone" placeholder='请输入联系方式' />
					</u-form-item>
					<u-form-item label="密码:" prop="passWord">
						<u-input v-model="form.passWord" placeholder='请输入密码' :password-icon="true" type='password'/>
					</u-form-item>
					<u-form-item label="确认密码:" prop="affirmPassWord">
						<u-input v-model="form.affirmPassWord" placeholder='请再次输入密码' :password-icon="true" type='password'/>
					</u-form-item>
				</u-form>
			</view>
			<view class="reg_text">
				<text @click="handReg()">
					已有账号? &nbsp&nbsp立即登录
				</text>
			</view>
			<u-button shape="square" type="primary" @click="handSub">点击注册</u-button>
		</view>
	</view>
</template>

<script>
	import cacheFunc from '@/utils/cache.js'
	export default {
		data() {
			return {
				form: {
					nickName: '',
					telPhone: '',
					userName: '',
					passWord: '',
					affirmPassWord: '',
				},
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, ],
					telPhone: [{
						validator: (rule, value, callback) => {
							var reg = /^(?:(?:\+|00)86)?1\d{10}$/

							if (!value) {
								callback(new Error('请输入手机号'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('手机号格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					passWord: [{
						validator: (rule, value, callback) => {
							var reg = /^\S*(?=\S{6,})(?![^a-zA-Z]+$)(?!\D+$)\S*$/;
							if (!value) {
								callback(new Error('请输入密码'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('密码长度在6-8位(6-8位数字、字母组合)'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					affirmPassWord: [{
						validator: (rule, value, callback) => {
							var reg = /^\S*(?=\S{6,})(?![^a-zA-Z]+$)(?!\D+$)\S*$/;
							if (!value) {
								callback(new Error('请输入确认密码'));
							} else if (value === this.form.passWord) {
								callback()
							} else {
								callback(new Error('密码和确认密码输入不一致请从新输入'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					userName: [{
						required: true,
						message: '请输入登录账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, ]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		methods: {
			handReg() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handSub() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const res = await this.$u.api.register(this.form)
						console.log(res)
						uni.showToast({
							title: res.message || '注册成功!'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form_box {}

	.reg_text {
		text-align: right;
		margin: 20px 0;
	}
</style>
